<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="presentation.css">
</head>
<body class="impress-not-supported">
	<div class="fallback-message">
		<p>
			Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified
			version of this presentation.
		</p>
		<p>
			For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.
		</p>
	</div>

	<div id="impress">

		<div id="cover" class="step slide" data-x="0" data-y="0">
			<div class="title">Tic Tac Toe 10x10</div>
		</div>

		<div id="html" class="step slide" data-x="1000" data-y="0">
			<header>
				<h1>Pagina HTML</h1>
			</header>
			<section>
				<img alt="html5" src="HTML5_Logo.svg" />
				<ul>
					<li>HTML: struttura</li>
					<li>CSS: aspetto</li>
					<li>JavaScript: comportamento</li>
				</ul>
			</section>

		</div>

		<div id="mvc" class="step slide" data-x="2000" data-y="0">
			<header>
				<h1>
					<b>M</b>odel <b>V</b>iew <b>C</b>ontroller
				</h1>
			</header>
			<section>
				<div class="mvc_image_container">
					<img alt="MVC" src="ModelViewControllerDiagram.svg" />
				</div>
				<br />
				<p>Dietro ad ogni User Interface vi è un concetto: M.V.C</p>
			</section>
		</div>

		<div id="view" class="step slide" data-x="3000" data-y="0">
			<header>
				<h1>View</h1>
			</header>
			<section>
				<div class="mvc_image_container">
					<img alt="view" src="BoardView.png" />
				</div>
				<p>Il compito della View è quello di gestire le interazioni dell’utente usando il controller.</p>
			</section>
		</div>

		<div id="model" class="step slide" data-x="4000" data-y="0">
			<header>
				<h1>Model</h1>
			</header>
			<section>
				<div class="mvc_image_container">
					<img alt="model" src="Model.png" />
				</div>
				<p>Il modello incapsula i dati e i metodi di accesso/modifica di questi.</p>
				<br />
				<p>Nel caso del Tic Tac Toe, il modello si occupa di contenere le mosse effettuate dai contendenti del gioco.</p>
			</section>
		</div>
		
		<div id="controller" class="step slide" data-x="5000" data-y="0">
			<header>
				<h1>Controller</h1>
			</header>
			<section>
				<img alt="flowchart" src="TicTacToe_Flowchart.png" />
				<p>Il controller definisce il comportamento che la applicazione ha.</p>
				<br />
				<p>Nel caso del Tic Tac Toe, il controller si occupa della gestione delle mosse.</p>
			</section>
		</div>
		
		<div id="domain" class="step slide" data-x="6000" data-y="0">
			<header>
				<h1>Modello di dominio</h1>
			</header>
			<section>
				<img alt="domain" src="DiagrammadiClasse.png" />
			</section>
		</div>

	</div>

	<script src="impress.js"></script>
	<script>
		impress().init();
	</script>
</body>
</html>